﻿@{
    ViewBag.Title = "MapTypeControl";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    .mapDiv {
        width: 300px; 
        height: 300px; 
        background-color: #ffffff;
        border: 1px solid #00BB00;
        float: left;
        margin: 20px;
        position: relative;
    }
    .mapGroup 
    {
        width: 98%;
    }
</style>

@Html.Partial("~/Views/Shared/_PageNote.cshtml")

<div class="mapGroup">
    <div id="map1" class="mapDiv"></div>
    <div id="map2" class="mapDiv"></div>
</div>
<div class="mapGroup">
    <div id="map3" class="mapDiv"></div>
    <div id="map4" class="mapDiv"></div>
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    window.onload = function () {
        var options1 = {
            zoom: 3,
            center: new google.maps.LatLng(37.09, -95.71),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                position: google.maps.ControlPosition.TOP
            }
        };

        var options2 = {
            zoom: 3,
            center: new google.maps.LatLng(48.862908, 2.352448),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position: google.maps.ControlPosition.TOP,
                mapTypeIds: [
                    google.maps.MapTypeId.ROADMAP,
                    google.maps.MapTypeId.SATELLITE
                ]
            }
        };

        var options3 = {
            zoom: 10,
            center: new google.maps.LatLng(40.73308, -73.996353),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            streetViewControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN
            }
        };

        var options4 = {
            zoom: 10,
            center: new google.maps.LatLng(48.862908, 2.352448),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: true,
            backgroundColor: '#000000'
        };

        var mapDiv1 = document.getElementById('map1');
        var mapDiv2 = document.getElementById('map2');
        var mapDiv3 = document.getElementById('map3');
        var mapDiv4 = document.getElementById('map4');

        // Creating the map
        var map1 = new google.maps.Map(mapDiv1, options1);
        var map2 = new google.maps.Map(mapDiv2, options2);
        var map3 = new google.maps.Map(mapDiv3, options3);
        var map4 = new google.maps.Map(mapDiv4, options4);
    }
</script>

